<template>
    <n-space :vertical="true" :size="16">
        <n-card :bordered="false" class="rounded-8px shadow-sm">
            <div ref="pieRef" class="h-400px"></div>
        </n-card>
        <n-card :bordered="false" class="rounded-8px shadow-sm">
            <div ref="lineRef" class="h-400px"></div>
        </n-card>
        <n-card :bordered="false" class="rounded-8px shadow-sm">
            <div ref="barRef" class="h-400px"></div>
        </n-card>
        <n-card :bordered="false" class="rounded-8px shadow-sm">
            <div ref="pictorialBarRef" class="h-600px"></div>
        </n-card>
        <n-card :bordered="false" class="rounded-8px shadow-sm">
            <div ref="scatterRef" class="h-600px"></div>
        </n-card>
        <n-card :bordered="false" class="rounded-8px shadow-sm">
            <div ref="radarRef" class="h-400px"></div>
        </n-card>
        <n-card :bordered="false" class="rounded-8px shadow-sm">
            <div ref="gaugeRef" class="h-640px"></div>
        </n-card>
    </n-space>
</template>

<script setup lang="ts">
import { onUnmounted, ref } from 'vue'
import type { Ref } from 'vue'
import { graphic } from 'echarts'
import { type ECOption, useEcharts } from '@/composables'

const pieOptions = ref<ECOption>({
    legend: {},
    toolbox: {
        show: true,
        feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    series: [
        {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
            data: [
                { value: 40, name: 'rose 1' },
                { value: 38, name: 'rose 2' },
                { value: 32, name: 'rose 3' },
                { value: 30, name: 'rose 4' },
                { value: 28, name: 'rose 5' },
                { value: 26, name: 'rose 6' },
                { value: 22, name: 'rose 7' },
                { value: 18, name: 'rose 8' }
            ]
        }
    ]
}) as Ref<ECOption>
const { domRef: pieRef } = useEcharts(pieOptions)

const lineOptions = ref<ECOption>({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    title: {
        text: 'Stacked Line'
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            color: '#37a2da',
            name: 'Email',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#37a2da'
                        },
                        {
                            offset: 1,
                            color: '#fff'
                        }
                    ]
                }
            },
            emphasis: {
                focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            color: '#9fe6b8',
            name: 'Union Ads',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#9fe6b8'
                        },
                        {
                            offset: 1,
                            color: '#fff'
                        }
                    ]
                }
            },
            emphasis: {
                focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            color: '#fedb5c',
            name: 'Video Ads',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#fedb5c'
                        },
                        {
                            offset: 1,
                            color: '#fff'
                        }
                    ]
                }
            },
            emphasis: {
                focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            color: '#fb7293',
            name: 'Direct',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#fb7293'
                        },
                        {
                            offset: 1,
                            color: '#fff'
                        }
                    ]
                }
            },
            emphasis: {
                focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            color: '#e7bcf3',
            name: 'Search Engine',
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0.25,
                            color: '#e7bcf3'
                        },
                        {
                            offset: 1,
                            color: '#fff'
                        }
                    ]
                }
            },
            emphasis: {
                focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
}) as Ref<ECOption>
const { domRef: lineRef } = useEcharts(lineOptions)

const barOptions = ref<ECOption>({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            color: '#8378ea',
            showBackground: true,
            barGap: 100,
            itemStyle: {
                borderRadius: [40, 40, 0, 0]
            },
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        }
    ]
}) as Ref<ECOption>
const { domRef: barRef } = useEcharts(barOptions)

const pictorialBarOption = ref<ECOption>(getPictorialBarOption()) as Ref<ECOption>
const { domRef: pictorialBarRef } = useEcharts(pictorialBarOption)

function getPictorialBarOption(): ECOption {
    const category: string[] = []
    let dottedBase = Number(new Date())
    const lineData: number[] = []
    const barData: number[] = []

    for (let i = 0; i < 20; i += 1) {
        const date = new Date((dottedBase += 3600 * 24 * 1000))
        category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'))
        const b = Math.random() * 200
        const d = Math.random() * 200
        barData.push(b)
        lineData.push(d + b)
    }

    const options: ECOption = {
        backgroundColor: '#0f375f',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['line', 'bar'],
            textStyle: {
                color: '#ccc'
            }
        },
        xAxis: {
            data: category,
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },
        yAxis: {
            splitLine: { show: false },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },
        series: [
            {
                name: 'line',
                type: 'line',
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 15,
                data: lineData
            },
            {
                name: 'bar',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    borderRadius: 5,
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#14c8d4' },
                        { offset: 1, color: '#43eec6' }
                    ])
                },
                data: barData
            },
            {
                name: 'line',
                type: 'bar',
                barGap: '-100%',
                barWidth: 10,
                itemStyle: {
                    color: new graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(20,200,212,0.5)' },
                        { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
                        { offset: 1, color: 'rgba(20,200,212,0)' }
                    ])
                },
                z: -12,
                data: lineData
            },
            {
                name: 'dotted',
                type: 'pictorialBar',
                symbol: 'rect',
                itemStyle: {
                    color: '#0f375f'
                },
                symbolRepeat: true,
                symbolSize: [12, 4],
                symbolMargin: 1,
                z: -10,
                data: lineData
            }
        ]
    }

    return options
}

const scatterOptions = ref<ECOption>(getScatterOption()) as Ref<ECOption>
const { domRef: scatterRef } = useEcharts(scatterOptions)

function getScatterOption() {
    // prettier-ignore
    const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a', '10a', '11a', '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];

    // prettier-ignore
    const days = ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

    // prettier-ignore
    const data: [number, number, number][] = [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 0], [0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1], [0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], [0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5], [1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], [1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], [1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3], [2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], [2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7], [2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4], [3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9], [3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4], [3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2], [4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1], [4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3], [4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10], [5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0], [5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0], [6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], [6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0], [6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]];

    const title: echarts.TitleComponentOption[] = []
    const singleAxis: echarts.SingleAxisComponentOption[] = []
    const series: echarts.ScatterSeriesOption[] = []

    days.forEach((day, idx) => {
        title.push({
            textBaseline: 'middle',
            top: `${((idx + 0.5) * 100) / 7}%`,
            text: day
        })
        singleAxis.push({
            left: 150,
            type: 'category',
            boundaryGap: false,
            data: hours,
            top: `${(idx * 100) / 7 + 5}%`,
            height: `${100 / 7 - 10}%`,
            axisLabel: {
                interval: 2
            }
        })
        series.push({
            singleAxisIndex: idx,
            coordinateSystem: 'singleAxis',
            type: 'scatter',
            data: [],
            symbolSize(dataItem) {
                return dataItem[1] * 4
            }
        })
    })

    data.forEach((dataItem) => {
        ;(series as any)[dataItem[0]].data.push([dataItem[1], dataItem[2]])
    })

    const option: ECOption = {
        tooltip: {
            position: 'top'
        },
        title,
        singleAxis,
        series: series as any
    }

    return option
}

const radarOptions = ref<ECOption>({
    title: {
        text: 'Multiple Radar'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        left: 'center',
        data: ['A Software', 'A Phone', 'Another Phone', 'Precipitation', 'Evaporation']
    },
    radar: [
        {
            indicator: [
                { name: 'Brand', max: 100 },
                { name: 'Content', max: 100 },
                { name: 'Usability', max: 100 },
                { name: 'Function', max: 100 }
            ],
            center: ['25%', '40%'],
            radius: 80
        },
        {
            indicator: [
                { name: 'Look', max: 100 },
                { name: 'Photo', max: 100 },
                { name: 'System', max: 100 },
                { name: 'Performance', max: 100 },
                { name: 'Screen', max: 100 }
            ],
            radius: 80,
            center: ['50%', '60%']
        },
        {
            indicator: (() => {
                const res = []
                for (let i = 1; i <= 12; i += 1) {
                    res.push({ name: `${i}月`, max: 100 })
                }
                return res
            })(),
            center: ['75%', '40%'],
            radius: 80
        }
    ],
    series: [
        {
            type: 'radar',
            tooltip: {
                trigger: 'item'
            },
            areaStyle: {},
            data: [
                {
                    value: [60, 73, 85, 40],
                    name: 'A Software'
                }
            ]
        },
        {
            type: 'radar',
            radarIndex: 1,
            areaStyle: {},
            data: [
                {
                    value: [85, 90, 90, 95, 95],
                    name: 'A Phone'
                },
                {
                    value: [95, 80, 95, 90, 93],
                    name: 'Another Phone'
                }
            ]
        },
        {
            type: 'radar',
            radarIndex: 2,
            areaStyle: {},
            data: [
                {
                    name: 'Precipitation',
                    value: [
                        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 6.0, 2.3
                    ]
                },
                {
                    name: 'Evaporation',
                    value: [
                        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 35.6, 62.2, 32.6, 20.0, 6.4, 3.3
                    ]
                }
            ]
        }
    ]
}) as Ref<ECOption>
const { domRef: radarRef } = useEcharts(radarOptions)

const gaugeOptions = ref<ECOption>({
    series: [
        {
            name: 'hour',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 12,
            splitNumber: 12,
            clockwise: true,
            axisLine: {
                lineStyle: {
                    width: 15,
                    color: [[1, 'rgba(0,0,0,0.7)']],
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 15
                }
            },
            splitLine: {
                lineStyle: {
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 3,
                    shadowOffsetX: 1,
                    shadowOffsetY: 2
                }
            },
            axisLabel: {
                fontSize: 50,
                distance: 25,
                formatter(value) {
                    if (value === 0) {
                        return ''
                    }
                    return `${value}`
                }
            },
            anchor: {
                show: true,
                icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
                showAbove: false,
                offsetCenter: [0, '-35%'],
                size: 120,
                keepAspect: true,
                itemStyle: {
                    color: '#707177'
                }
            },
            pointer: {
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 12,
                length: '55%',
                offsetCenter: [0, '8%'],
                itemStyle: {
                    color: '#C0911F',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                show: false
            },
            title: {
                offsetCenter: [0, '30%']
            },
            data: [
                {
                    value: 0
                }
            ]
        },
        {
            name: 'minute',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            clockwise: true,
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 8,
                length: '70%',
                offsetCenter: [0, '8%'],
                itemStyle: {
                    color: '#C0911F',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            anchor: {
                show: true,
                size: 20,
                showAbove: false,
                itemStyle: {
                    borderWidth: 15,
                    borderColor: '#C0911F',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                show: false
            },
            title: {
                offsetCenter: ['0%', '-40%']
            },
            data: [
                {
                    value: 0
                }
            ]
        },
        {
            name: 'second',
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            min: 0,
            max: 60,
            animationEasingUpdate: 'bounceOut',
            clockwise: true,
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 4,
                length: '85%',
                offsetCenter: [0, '8%'],
                itemStyle: {
                    color: '#C0911F',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            anchor: {
                show: true,
                size: 15,
                showAbove: true,
                itemStyle: {
                    color: '#C0911F',
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 8,
                    shadowOffsetX: 2,
                    shadowOffsetY: 4
                }
            },
            detail: {
                show: false
            },
            title: {
                offsetCenter: ['0%', '-40%']
            },
            data: [
                {
                    value: 0
                }
            ]
        }
    ]
}) as Ref<ECOption>

let intervalId: NodeJS.Timer
const { domRef: gaugeRef } = useEcharts(gaugeOptions, (chart) => {
    intervalId = setInterval(() => {
        const date = new Date()
        const second = date.getSeconds()
        const minute = date.getMinutes() + second / 60
        const hour = (date.getHours() % 12) + minute / 60

        chart.setOption({
            animationDurationUpdate: 300,
            series: [
                {
                    name: 'hour',
                    animation: hour !== 0,
                    data: [{ value: hour }]
                },
                {
                    name: 'minute',
                    animation: minute !== 0,
                    data: [{ value: minute }]
                },
                {
                    animation: second !== 0,
                    name: 'second',
                    data: [{ value: second }]
                }
            ]
        })
    }, 1000)
})

function clearClock() {
    clearInterval(intervalId)
}

onUnmounted(() => {
    clearClock()
})
</script>

<style scoped></style>
